<template>
	<div class="screen_wrap echarts_box flex_wrap">
		<corner></corner>
		<title1 title="站点AQI月历图"></title1>
		<div class="flex_body">			
			<div class="container">
				<div class="monthtitle">
					<span>{{siteName}}</span>
			        <div class="legend">
			        	<div class="section" v-for="(item,index) in legendList">
			        		<div class="bg" :style="{ background: item.bg }"></div>
			        		<div>{{item.value}}</div>
			        	</div>       	
			        </div>  				
				</div>
				<div class="map">
					<el-row :gutter="10" style="width: 100%;">
						<el-col :span="3" v-for="(item,index) of list" :key="index" class="item" >
							<div class="inner">
								<div class="date">{{ item.time }}</div>
								<div class="text">{{ item.aqi>0?item.aqi:'' }}</div>
								<div class="mark" :class="getLevel(item.aqiLevel)"></div>
							</div>
						</el-col>
					</el-row>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { getThisMouthAqiData } from "@/api/bigScreen/bigScreen";
	import corner from '../public/corner'
	import title1 from '../public/title1'
	export default {
		components: {
			corner,
			title1
		},
		data() {
			return {
				allData: null,
				currentIndex: 0,
				list: null,
				siteName:'',
				timer:null,		
				legendList:[
					{bg:'rgb(0,228,0)',value:'优'},
					{bg:'rgb(255,255,0)',value:'良'},
					{bg:'rgb(255,126,0)',value:'轻度'},
					{bg:'#ff0000',value:'中度'},
					{bg:'rgb(153,0,76)',value:'重度'},
					{bg:'rgb(126,0,35)',value:'严重'}
				]					
			}
		},
		computed: {
			/**计算level 根据等级显示不同颜色**/
			getLevel() {
				return function(aqiLevel) {					
					if(aqiLevel==0){
						return 'mark_none' 
					}else{
						return 'mark_' + aqiLevel
					}
				}
			}
		},
		mounted() {
			this.initData()
			let that=this
			this.timer=setInterval(function(){
				that.currentIndex++
				if(that.currentIndex>=that.allData.length){
					that.currentIndex=0
				}
				that.init()
			},5000)			
		},
	    beforeDestroy() {
	       clearInterval(this.timer)
	    },			
		methods: {
			initData() {
				getThisMouthAqiData().then(res => {
					this.allData = res.data.data
					this.init()
				})
			},
			init() {
				let info = this.allData[this.currentIndex]
				this.siteName=info.siteName
				this.list = info.airAqiList
			}			
		}
	}
</script>

<style lang="scss" scoped>
	.map {}	
	.container {
		padding-top: 20px;
		height: 100%;
		display: flex;
		flex-direction: column;
		.monthtitle {
			position: relative;
			display: flex;
			padding: 0 20px;
			align-items: center;
			justify-content: space-between;
			color: #f3ffff;
		}
		.map {
			flex: 1;
			padding: 10px 20px;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			.item {
                
				color: #f3ffff;
			}
			.inner {
				padding: 3px;
				height: 100%;
				border: 1px solid #12B8E8;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				position: relative;
			}
		}
	}
	
	.date {
		font-size: 12px;
		color: #f3ffff;
		height: 20px;
		display: flex;
		justify-content: space-between;
	}
	
	.text {
		font-weight: bold;
		text-align: center;
		height: 30px;	
	}
	
	.legend{display: flex;
	  .section{display: flex;align-items: center;color: #15FEFE;font-size: 12px;margin-right: 4px;}
	  .bg{width: 5px;height: 5px;margin-right: 4px;}	
	}
	
	.mark {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 8px;
		width: 100%;
		//background: $colorYellow;
	}
	
	.mark_1 {
		background: $colorGreen;
	}
	
	.mark_2 {
		background: $colorYellow;
	}
	
	.mark_3 {
		background: $colorOrange;
	}
	
	.mark_4 {
		background: $colorRed;
	}
	
	.mark_5 {
		background: $colorPurple;
	}
	
	.mark_6 {
		background: $colorBrown;
	}
	.mark_none {
		background: #ddd;
	}	
</style>